<template>
  <div>
    <div class="des">
      <img :src="mesData.picUrl" class="img" v-show="mesData.picUrl" />
      <!-- <img src="../../static/img/剑客.jpeg " class="sword" v-show="!mesData.picUrl"/> -->
      <img
        src="../../static/img/404.svg"
        v-show="!mesData.picUrl"
        class="img404"
        alt="123"
      />
      <span style="position: absolute; left: 220px; top: 90px" v-show="!mesData.picUrl"
        >接口错误，歌手图片等信息无法加载，但是歌手作品可以查看哦~~</span
      >

      <h2 class="singerName" v-show="mesData.name">{{ mesData.name }}</h2>
      <h2 class="musicSize" v-show="mesData.musicSize">
        单曲数：{{ mesData.musicSize }}
      </h2>

      <h2 class="albumSize" v-show="mesData.albumSize">
        专辑数：{{ mesData.albumSize }}
      </h2>
      <h2 class="mvSize" v-show="mesData.mvSize">MV数：{{ mesData.mvSize }}</h2>
    </div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="精选" name="toChoiceness"> </el-tab-pane>
      <el-tab-pane label="专辑" name="toAlbum"> </el-tab-pane>
      <el-tab-pane label="MV" name="toMV"> </el-tab-pane>
      <el-tab-pane label="歌手详情" name="toDetail"> </el-tab-pane>
    </el-tabs>

    <router-view> </router-view>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { getSingerDetails } from "@/service/songs";
import { storage } from "@/stores/storage";
import router from "../../router";
export default defineComponent({
  mounted() {
    this.toChoiceness();
    this.getMes();
  },
  setup() {
    let store = storage();
    const { singerId } = storeToRefs(store);
    let mesData = ref({});
    const activeName = ref("toChoiceness");
    function getMes() {
      getSingerDetails(singerId.value)
        .then((res) => {
          mesData.value.name = res.data.data.artist.name;
          mesData.value.picUrl = res.data.data.artist.cover;
          mesData.value.musicSize = res.data.data.artist.musicSize;
          mesData.value.mvSize = res.data.data.artist.mvSize;
          mesData.value.albumSize = res.data.data.artist.albumSize;
        })
        .catch((err) => {
          if (err) ElMessage("后台接口有误");
        });
    }
    function toChoiceness() {
      router.push({
        path: "/singer/choiceness",
      });
    }
    function toAlbum() {
      router.push({
        path: "/singer/album",
      });
    }
    function toMV() {
      router.push({
        path: "/singer/mv",
      });
    }
    function toDetail() {
      router.push({
        path: "/singer/details",
      });
    }
    const handleClick = (tab, event) => {
      // console.log("tt",tab.paneName, event)
      if (tab.paneName === "toChoiceness") toChoiceness();
      else if (tab.paneName === "toAlbum") toAlbum();
      else if (tab.paneName === "toMV") toMV();
      else if (tab.paneName === "toDetail") toDetail();
    };
    return {
      singerId,
      activeName,
      mesData,
      toChoiceness,
      toAlbum,
      toMV,
      toDetail,
      handleClick,
      getMes,
    };
  },
});
</script>

<style scoped>
.img {
  width: 220px;
  margin: 10px 20px;
}
.des {
  position: relative;
  width: 1000px;
  height: 200px;
}
.singerName {
  font-size: 40px;
  position: absolute;
  top: 20px;
  left: 270px;
}
.musicSize {
  font-size: 20px;
  position: absolute;
  top: 90px;
  left: 280px;
}
.mvSize {
  font-size: 20px;
  position: absolute;
  top: 90px;
  left: 430px;
}
.albumSize {
  font-size: 20px;
  position: absolute;
  top: 90px;
  left: 610px;
}
.demo-tabs {
  padding: 20px;
  width: 280px;
}
.img404 {
  width: 150px;
  margin: 25px;
}
</style>
